<template>
  <div id="digital-flop">
    <div
      class="digital-flop-item"
      v-for="item in digitalFlopData"
      :key="item.title"
    >
      <div class="digital-flop-title">{{ item.title }}</div>
      <div class="digital-flop">
        <dv-digital-flop
          :config="item.number"
          style="width: 100px; height: 50px"
        />
        <div class="unit">{{ item.unit }}</div>
      </div>
    </div>

    <dv-decoration-10 />
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "DigitalFlop",
  data() {
    return {
      digitalFlopData: [],
    };
  },
  methods: {
    createData() {
      const color_defs = {
        全部服务器: "#4d99fc",
        Linux: "#f46827",
        Windows: "#40faee",
      };
      const other_color_defs = [
        "#4d99fc",
        "#f46827",
        "#40faee",
        "#4d99fc",
        "#f46827",
        "#40faee",
      ];
      this.axios({
        url: "/group_data/",
        method: "GET",
        responseType: "json",
      }).then((res) => {
        const total_slots = 9;
        const predefined_slots = 3;
        this.digitalFlopData = [];
        var jsondata = JSON.parse(JSON.stringify(res.data));

        let data = jsondata["grouped"];
        console.log(data);
        if ("全部服务器" in data) {
          console.log("添加全部服务器.", data["全部服务器"]);
          this.digitalFlopData.push({
            title: "全部服务器",
            number: {
              number: [data["全部服务器"]],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: color_defs["全部服务器"],
                fontWeight: "bold",
              },
            },
            unit: "台",
          });
        }
        if ("Linux" in data) {
          // console.log('添加全部服务器.',data['全部服务器']);
          this.digitalFlopData.push({
            title: "Linux",
            number: {
              number: [data["Linux"]],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: color_defs["Linux"],
                fontWeight: "bold",
              },
            },
            unit: "台",
          });
        }
        if ("Windows" in data) {
          // console.log('添加全部服务器.',data['全部服务器']);
          this.digitalFlopData.push({
            title: "Windows",
            number: {
              number: [data["Windows"]],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: color_defs["Windows"],
                fontWeight: "bold",
              },
            },
            unit: "台",
          });
        }
        console.log('Data1',this.digitalFlopData.length);
        // 总共 total_slots 个block，已经设置 predefined_slots 个,再添加 (total_slots-predefined_slots)个
        let data_left_arr = [];
        for (let k in data) {
          if (k == "全部服务器" || k == "Linux" || k == "Windows" || k == "未知OS") {
            continue;
          }
          let _name = '';
          let names = k.split('##');
          if (names.length > 2) {
            // _name = names[0]+'/'+names[names.length-1];
            _name = names[1];
          }
          else{
            _name = k;
          }
          data_left_arr.push({
            name: _name,
            value: data[k],
          });
        }
        console.log("Data Left Arr:", data_left_arr);
        data_left_arr = _.reverse(_.sortBy(data_left_arr, "value"));
        let x = (total_slots-predefined_slots)-1;
        if (data_left_arr.length < x) {
          x = data_left_arr.length;
        }
        for (let i = 0; i < x; i++) {
          // add item
          let _item = data_left_arr[i];
          this.digitalFlopData.push({
            title: _item["name"],
            number: {
              number: [_item["value"]],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: other_color_defs[i],
                fontWeight: "bold",
              },
            },
            unit: "台",
          });
        }
        console.log('Data:',this.digitalFlopData);
        if (data_left_arr.length > (total_slots-predefined_slots)-1) {
          // 剩余的统计为其他
          let other_values = 0;
          for (let i = (total_slots-predefined_slots)-1; i < data_left_arr.length; i++) {
            other_values += data_left_arr[i]["value"];
          }
          this.digitalFlopData.push({
            title: "其他系统",
            number: {
              number: [other_values],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: other_color_defs[other_color_defs.length - 1],
                fontWeight: "bold",
              },
            },
            unit: "台",
          });
        }
        console.log('Before 补充:',this.digitalFlopData);
        // 补充剩余slot
        let gangs = [
          {
            title: "A系统",
            number: {
              number: [randomExtend(20, 30)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#f46827",
                fontWeight: "bold",
              },
            },
            unit: "台",
          },
          {
            title: "B系统",
            number: {
              number: [randomExtend(20, 30)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#40faee",
                fontWeight: "bold",
              },
            },
            unit: "台",
          },
          {
            title: "C系统",
            number: {
              number: [randomExtend(10, 20)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#4d99fc",
                fontWeight: "bold",
              },
            },
            unit: "台",
          },
          {
            title: "D系统",
            number: {
              number: [randomExtend(5, 10)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#f46827",
                fontWeight: "bold",
              },
            },
            unit: "#",
          },
          {
            title: "E系统",
            number: {
              number: [randomExtend(5, 10)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#40faee",
                fontWeight: "bold",
              },
            },
            unit: "#",
          },
          {
            title: "F系统",
            number: {
              number: [randomExtend(5, 10)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#4d99fc",
                fontWeight: "bold",
              },
            },
            unit: "台",
          },
          {
            title: "G系统",
            number: {
              number: [randomExtend(5, 10)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#f46827",
                fontWeight: "bold",
              },
            },
            unit: "台",
          },
          {
            title: "H系统",
            number: {
              number: [randomExtend(5, 10)],
              content: "{nt}",
              textAlign: "right",
              style: {
                fill: "#40faee",
                fontWeight: "bold",
              },
            },
            unit: "台",
          },
        ];
        if (this.digitalFlopData.length < total_slots) {
          this.digitalFlopData = this.digitalFlopData.concat(
            _.sampleSize(gangs, total_slots - this.digitalFlopData.length)
          );
        }
      });
      const { randomExtend } = this;

      // this.digitalFlopData=this.digitalFlopData.concat([

      //   {
      //     title: "桥梁",
      //     number: {
      //       number: [randomExtend(20, 30)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#f46827",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "座",
      //   },
      //   {
      //     title: "涵洞隧道",
      //     number: {
      //       number: [randomExtend(20, 30)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#40faee",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      //   {
      //     title: "匝道",
      //     number: {
      //       number: [randomExtend(10, 20)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#4d99fc",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      //   {
      //     title: "隧道",
      //     number: {
      //       number: [randomExtend(5, 10)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#f46827",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      //   {
      //     title: "服务区",
      //     number: {
      //       number: [randomExtend(5, 10)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#40faee",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      //   {
      //     title: "收费站",
      //     number: {
      //       number: [randomExtend(5, 10)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#4d99fc",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      //   {
      //     title: "超限站",
      //     number: {
      //       number: [randomExtend(5, 10)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#f46827",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      //   {
      //     title: "停车区",
      //     number: {
      //       number: [randomExtend(5, 10)],
      //       content: "{nt}",
      //       textAlign: "right",
      //       style: {
      //         fill: "#40faee",
      //         fontWeight: "bold",
      //       },
      //     },
      //     unit: "个",
      //   },
      // ]);
      // console.log('digitalFlopData:',this.digitalFlopData);
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    },
  },
  mounted() {
    const { createData } = this;

    createData();

    setInterval(createData, 30000);
  },
};
</script>

<style lang="less">
#digital-flop {
  position: relative;
  height: 15%;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(6, 30, 93, 0.5);

  .dv-decoration-10 {
    position: absolute;
    width: 95%;
    left: 2.5%;
    height: 5px;
    bottom: 0px;
  }

  .digital-flop-item {
    width: 11%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 3px solid rgb(6, 30, 93);
    border-right: 3px solid rgb(6, 30, 93);
  }

  .digital-flop-title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .digital-flop {
    display: flex;
  }

  .unit {
    margin-left: 10px;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    padding-bottom: 13px;
  }
}
</style>
